<template>
  <div class="house-detail">
    <!-- 返回按钮和标题区域 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <span>← 返回上一级</span>
      </div>
      <div class="title" v-if="houseDetail">
        <img :src="houseDetail.image" v-if="houseDetail.image" alt="房源图片" class="house-image">
        <h2>{{ houseDetail.title }}</h2>
      </div>
    </div>

    <!-- 房源详情内容 -->
    <div class="detail-content" v-if="houseDetail">
      <div class="basic-info">
        <div class="price">¥{{ houseDetail.price }}/月</div>
        <div class="area">{{ houseDetail.area }}㎡</div>
        <div class="orientation">{{ formatOrientation(houseDetail.orientation) }}</div>
      </div>
      
      <div class="address">
        <el-icon><Location /></el-icon>
        {{ houseDetail.address }}
      </div>

      <div class="facilities" v-if="houseDetail.facilities">
        <h3>配套设施</h3>
        <div class="facility-list">
          <span v-for="facility in parseFacilities(houseDetail.facilities)" 
                :key="facility"
                class="facility-item">
            {{ facility }}
          </span>
        </div>
      </div>

      <div class="description">
        <h3>房源描述</h3>
        <p>{{ houseDetail.description }}</p>
      </div>

      <div class="landlord-info">
        <h3>房东信息</h3>
        <p>联系人：{{ houseDetail.landlord }}</p>
      </div>

      <!-- 评论列表 -->
      <div class="comments-section">
        <h3>评论列表</h3>
        <div v-if="comments.length > 0">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <span class="username">{{ comment.username }}</span>
              <span class="time">{{ comment.time }}</span>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
            <div class="comment-rating">评分: {{ comment.rating }}</div>
          </div>
          <el-pagination
            v-if="totalComments > pageSize"
            background
            layout="prev, pager, next"
            :total="totalComments"
            :page-size="pageSize"
            :current-page="page"
            @current-change="handlePageChange"
            style="margin-top: 24px; text-align: right;"
          />
        </div>
        <div v-else class="no-comments">暂无评论</div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else-if="loading" class="loading">
      <el-loading :active="loading" />
    </div>

    <!-- 错误提示 -->
    <div v-else class="error-msg">
      {{ errorMsg }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Location, ArrowLeft } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const houseDetail = ref(null)
const loading = ref(false)
const errorMsg = ref('')
const comments = ref([]);
const totalComments = ref(0);
const page = ref(1);
const pageSize = ref(10);

// 返回上一页
const goBack = () => {
  router.back()
}

// 格式化朝向
const formatOrientation = (orientation) => {
  const orientationMap = {
    'south': '朝南',
    'north': '朝北',
    'east': '朝东',
    'west': '朝西'
  }
  return orientationMap[orientation] || orientation
}

// 解析设施字符串为数组
const parseFacilities = (facilities) => {
  try {
    return JSON.parse(facilities.replace(/'/g, '"'))
  } catch (e) {
    return []
  }
}

// 获取房源详情
const fetchHouseDetail = async () => {
  const id = route.query.id
  if (!id) {
    errorMsg.value = '未找到房源信息'
    return
  }

  loading.value = true
  try {
    const response = await axios.get(`http://127.0.0.1:8000/users/house/`, {
      params: { id }
    })
    houseDetail.value = response.data.data
  } catch (error) {
    console.error('获取房源详情失败:', error)
    errorMsg.value = '获取房源详情失败'
    ElMessage.error('获取房源详情失败')
  } finally {
    loading.value = false
  }
}

// 获取所有好评评论（分页）
const fetchComments = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/users/api/comments/', {
      params: {
        page: page.value,
        page_size: pageSize.value
      }
    })
    if (response.data.success) {
      comments.value = response.data.data
      totalComments.value = response.data.total
    }
  } catch (error) {
    console.error('获取评论失败:', error)
  }
}

const handlePageChange = (newPage) => {
  page.value = newPage
  fetchComments()
}

onMounted(() => {
  fetchHouseDetail()
  fetchComments()
})
</script>

<style scoped>
.house-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.back-btn {
  display: inline-block;
  padding: 8px 15px;
  background-color: #409EFF;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 10px;
}

.back-btn:hover {
  background-color: #66b1ff;
}

.title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.house-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.detail-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
}

.basic-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.price {
  font-size: 24px;
  color: #ff4d4f;
  font-weight: bold;
}

.area, .orientation {
  font-size: 16px;
  color: #606266;
}

.address {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
  margin-bottom: 20px;
}

.facilities {
  margin-bottom: 20px;
}

h3 {
  font-size: 18px;
  color: #303133;
  margin-bottom: 10px;
}

.facility-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.facility-item {
  padding: 4px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #606266;
}

.description {
  margin-bottom: 20px;
}

.description p {
  color: #606266;
  line-height: 1.6;
}

.landlord-info {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.loading {
  text-align: center;
  padding: 40px;
}

.error-msg {
  text-align: center;
  color: #f56c6c;
  padding: 40px;
}

.comments-section {
  margin-top: 32px;
  padding: 32px 24px;
  background-color: #f9f9fb;
  border-radius: 12px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07);
}

.comment-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  padding: 18px 20px 14px 20px;
  margin-bottom: 20px;
  transition: box-shadow 0.2s;
}

.comment-item:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
}

.time {
  font-size: 13px;
  color: #b0b0b0;
}

.comment-content {
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 8px;
  word-break: break-all;
}

.comment-rating {
  font-size: 14px;
  color: #faad14;
  font-weight: bold;
  letter-spacing: 1px;
}

.no-comments {
  text-align: center;
  color: #b0b0b0;
  font-size: 15px;
  padding: 30px 0 10px 0;
}
</style> 